<template>
  <div>
    <my-container title="查看企业">
      <info-wrapper title="企业信息">
        <el-row>
          <el-col :span="3">企业名称:</el-col>
          <el-col :span="8">{{ Info.name }}</el-col>
          <el-col :span="3">法人:</el-col>
          <el-col :span="8">
            {{ Info.legalPerson }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3">注册地址:</el-col>
          <el-col :span="8"> {{ Info.registeredAddress }}</el-col>
          <el-col :span="3">所在行业:</el-col>
          <el-col :span="8">
            {{ Info.industryName }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3">营业执照:</el-col>
          <el-col :span="8"><img :src="Info.businessLicenseUrl" alt=""></el-col>
        </el-row>
      </info-wrapper>
      <info-wrapper title="联系人信息">
        <el-row>
          <el-col :span="3">企业联系人:</el-col>
          <el-col :span="8">{{ Info.contact }}</el-col>
          <el-col :span="3">联系电话:</el-col>
          <el-col :span="8">{{ Info.contactNumber }}</el-col>
        </el-row>
      </info-wrapper>
      <info-wrapper title="租赁记录">
        <el-table
          :data="Info.rent"
          style="width: 100%"
          border
          :header-cell-style="{ backgroundColor: '#f4f6f8'}"
        >
          <el-table-column
            label="序号"
            width="80px"
            type="index"
          />
          <el-table-column
            label="租赁楼宇"
            width="width"
            prop="name"
          />
          <el-table-column
            label="合同状态"
            width="width"
          >
            <template #default="{row}">
              <el-tag v-if="row.status===0" type="primary" plain>待生效</el-tag>
              <el-tag v-else-if="row.status===1" type="success" plain>生效中</el-tag>
              <el-tag v-else-if="row.status===2" type="warning" plain>已到期</el-tag>
              <el-tag v-else-if="row.status===3" type="info" plain>退租</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="租赁起止时间"
            width="200px"
          >
            <template #default="{row}">
              {{ row.startTime+' 至 '+row.endTime }}
            </template>
          </el-table-column>
          <el-table-column
            label="租赁合同"
            width="350px"
          >
            <template #default="{row}">
              <a :href="row.contractUrl"> {{ getLastPartOfData(row) }}</a>
            </template>
          </el-table-column>
          <el-table-column
            label="录入时间"
            width="width"
            prop="createTime"
          />
          <el-table-column
            label="操作"
            width="width"
          ><template #default="{row}">
            <a :href="row.contractUrl" download>合同下载</a>
          </template>
          </el-table-column>
        </el-table>
      </info-wrapper>
    </my-container>
  </div>
</template>

<script>
import MyContainer from '@/components/my-container'
import { getEpDetailAPI } from '@/api/enterprise'
import InfoWrapper from '@/components/info-wrapper.vue'
export default {
  components: {
    MyContainer,
    InfoWrapper
  },
  data() {
    return {
      Info: {}
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    downLoad(row) {

    },
    getLastPartOfData(row) {
      const arr = row.contractUrl.split('/')
      return arr[arr.length - 1]
    },
    async  getInfo() {
      const { id } = this.$route.params
      this.Info = await getEpDetailAPI(id)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-col-3{
  padding: 0px;
  color: #909399;
  text-align: right!important;
  margin-bottom: 30px;
}
.el-col-8{
  padding-left: 10px;
}
img{
  width: 250px;
}
a {
  color: #4770ff;
  text-decoration: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
  transition: color .3s;
}
</style>
